<template>
  <div class="dashboard-editor-container">

    <panel-group/>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <!-- <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row> -->

    
  </div>
</template>

<script>

import PanelGroup from './dashboard/PanelGroup';
import LineChart from './dashboard/LineChart';
import PieChart from './dashboard/PieChart';

import { orderLine} from "@/api/qysj/app/index.js";

const lineChartData = {
  xData:[0,0,0,0,0,0,0],
  orderData: [0, 0, 0, 0, 0, 0, 0],
  productData: [0, 0, 0, 0, 0, 0, 0],
  sourceData: [0, 0, 0, 0, 0, 0, 0],
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    PieChart
  },
  data() {
    return {
      lineChartData: lineChartData,
      queryParams:{}
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData(){
      orderLine(this.queryParams).then(response => {
        if(response.data){
            let arrXData = [],arrOrderData = [];
            for (let key in response.data) {
              arrXData.push(key);
              arrOrderData.push(response.data[key].orderNum);
            }
            this.lineChartData.xData = arrXData;
            this.lineChartData.orderData = arrOrderData;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;


}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
